import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Button, Cell, NavBar, Notify, Toast } from "react-vant";

const Detail = () => {
  const location = useLocation();
  const v = location.state;
  const [typeList, setTypeList] = useState(["经济舱", "头等舱", "商务舱"]);
  const [value, setValue] = useState("");
  const navigate = useNavigate()
  const toOrder = () => {
    if(value) {
      navigate('/order', { state: v })
    } else {
      // react19 和 react-vant 3.3.5 版本冲突
      // Notify.show({ type: 'danger', message: '请选择座位类型' })
      // Toast({ message: "请选择座位类型"})
      alert("请选择座位类型")
    }
   
  }
  return (
    <div>
      <NavBar title="详情"></NavBar>
      <Cell
        title={
          <div>
            {v.dasn}
            {v.dat} 到 {v.aasn}
            {v.aat} {v.dst}-{v.ast}
          </div>
        }
        label={
          <>
            <div>
              {v.asn}|{v.amn}|{v.amt}
            </div>
            <div>
              <div style={{ color: "red" }}>¥:{v.atp}</div>
            </div>
          </>
        }
      ></Cell>
      {/* 选择座位类型 */}
      <h3>选择座位类型--{value}</h3>
      <Button.Group>
        {typeList.map((v, i) => {
          return (
            <Button
              type={v === value ? "info" : "default"}
              onClick={() => setValue(v)}
              key={i}
            >
              {v}
            </Button>
          );
        })}
      </Button.Group>

      <div>
        <Button type="primary" block onClick={() => toOrder()}>立即下单</Button>
      </div>
    </div>
  );
};

export default Detail;
